<template>
  <div>
    <div class="game_server">
      <div class="title">
        <span class="icon"></span>
        <span>游戏开服</span>
      </div>
       <div v-if="gameserver !== null">
          <ul class="list_box" :style="{height: show === true? 'auto' : '188px'}">
            <li 
              v-for="(item, index) in gameserver" 
              :key="index" 
              class="list_item"
              >
              <div class="server_icon">
                <div v-if="appType === '277'">
                  <span v-show="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()" class="icon_today_active"></span>
                  <span v-if="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()" class="icon_today"></span>
                  <span v-else class="icon_else"></span>
                </div>
                <div v-else>
                  <span v-show="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()" class="icon_today_active_cat"></span>
                  <span v-if="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()" class="icon_today_cat"></span>
                  <span v-else class="icon_else"></span>
                </div>
              </div>
              <div 
              class="server_time"
              :class="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()? appType === '277'?'server_time_active':'server_time_active_cat':''"
              >{{item.begintime | fnDate}}</div>
              <div 
                :class="new Date(Number(item.begintime)* 1000).toDateString() === new Date().toDateString()? appType === '277'?'server_name_active':'server_name_active_cat':'server_name'"
                >{{item.servername}}</div>
            </li>
          </ul>
        <p class="text_tips" v-show="gameserver !== null">以上开服信息仅供参考</p>
        <div class="btn_show_hide" v-if="showBtn">
          <div v-show="show" class="show_hide" @click="show = !show">
            <span :style="{color: appType === '277'?'':'#FF5E39'}">收起</span>
            <img v-show="appType === '277'" src="../../../assets/img/datail/ic_detail_arrow_top.png" alt="">
            <img v-show="appType === 'cat'" src="../../../assets/img/datail/ic_detail_arrow_top_cat.png" alt="">
          </div>
          <div v-show="!show" class="show_hide" @click="show = !show">
            <span :style="{color: appType === '277'?'':'#FF5E39'}">查看全部活动</span>
            <img v-show="appType === '277'" src="../../../assets/img/datail/ic_detail_arrow_down.png" alt="">
            <img v-show="appType === 'cat'" src="../../../assets/img/datail/ic_detail_arrow_down_cat.png" alt="">
          </div>
        </div>
      </div>
      <div v-else>
        <img class="empty_img" src="../../../assets/img/datail/ic_empty_log.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import jutils from 'jutils-src'
import { appType } from '../../../assets/js/app';

  export default {
    props: {
      gameserver: {
        type: Array,
        default: null,
      },
    },
    created () {
      this.appType = appType();
    },
    data() {
      return {
        appType: null,
        show: true,
      }
    },
    computed: {
      showBtn() {
        if(this.gameserver !== null) {
          if (this.gameserver.length > 3) {
            return true
          }else {
            return false
          }
        }else {
          return false
        }
      }
    },
    filters: {
    fnDate: function(date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date*1000),"MM-DD HH:ii")
    }
  }
  }
</script>

<style scoped>
.game_server {
  width: 750px;
  box-sizing: border-box;
  height: auto;
  padding: 44px 40px 0;
  border-bottom: 1px solid #e3e3e3;
}

.game_server .title {
  padding-bottom: 20px;
  font-size: 26px;
  color: #333;
  font-weight: bold;
  line-height: 36px;
  display: flex;
  align-items: center;
}

.game_server .title .icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url('../../../assets/img/datail/ic_game_detail_clock.png') no-repeat;
  background-size: 100%;
  margin-right: 15px;
}

.new_icon {
  position: absolute;
  top: -15px;
  right: -60px;
  width: 48px;
  height: 29px;
  background: url('../../../assets/img/datail/ic_active_new.png') no-repeat;
  background-size: 100%;
}

.list_box {
  height: 188px;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.list_item {
  font-size: 24px;
  color: #737373;
  height: 66px;
  display: flex;
  align-items: center;
  transition: all 1s ease-in-out;
}

.server_icon {
  position: relative;
  flex-shrink: 1;
  margin-right: 20px;
}

.server_time_active {
  color: #4252e5;
}

.server_time_active_cat {
  color: #FF8210;
}

.server_name_active {
  color: #4252e5;
  flex-shrink: 1;
  width: 268px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #4252e5;
  border-radius: 20px;
}

.server_name_active_cat {
  color: #FF8210;
  flex-shrink: 1;
  width: 268px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #FF8210;
  border-radius: 20px;
}

.icon_else {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url('../../../assets/img/datail/ic_server_else.png') no-repeat;
  background-size: 100%;
}

.icon_today {
  /* position: relative; */
  display: inline-block;
  width: 36px;
  height: 36px;
  background: rgba(66, 82, 229, 0.4);
  border-radius: 50%;
  animation: scale 1s ease infinite;
}

.icon_today_cat {
  /* position: relative; */
  display: inline-block;
  width: 36px;
  height: 36px;
  background: #FF5E394d;
  border-radius: 50%;
  animation: scale 1s ease infinite;
}

.icon_today_active {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4252e5;
}

.icon_today_active_cat {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF5E39;
}

@keyframes scale {
  0% { transform: scale(0.5) }
  50% { transform: scale(1) }
  100% { transform: scale(0.5) }
}

.server_time {
  flex-grow: 1;
}

.server_name {
  flex-shrink: 1;
  width: 268px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #bebebe;
  border-radius: 20px;
}

.text_tips {
  padding-top: 20px;
  font-size: 18px;
  color: #999;
  text-align: center;
}

.btn_show_hide {
  line-height: 40px;
  padding: 32px 0;
  font-size: 24px;
  color: #3246f1;
}

.show_hide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show_hide img {
  margin-left: 10px;
  width: 16px;
  height: 10px;
}
</style>